<script lang="ts" setup>
import { safeAreaInsets } from '@/utils/systemInfo'

defineOptions({
  name: 'Home',
})
definePage({
  // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
  type: 'home',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
})

function handleToModel() {
  uni.navigateTo({
    url: '/pages/model/index',
  })
}

function handleTo3D() {
  uni.navigateTo({
    url: '/pages/ar/index',
  })
}

function handleTo3DLoad() {
  uni.navigateTo({
    url: '/pages/ar-load/index',
  })
}

function handleToModelLoad() {
  uni.navigateTo({
    url: '/pages/model-load/index',
  })
}

function handleTo3DTouch() {
  uni.navigateTo({
    url: '/pages/ar-touch/index',
  })
}

function handleTo3DTouchLoad() {
  uni.navigateTo({
    url: '/pages/ar-touch-load/index',
  })
}

function handleToCamera() {
  uni.navigateTo({
    url: '/pages/touch/index',
  })
}
</script>

<template>
  <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
    <wd-button type="primary" @click="handleToModel">
      预览模型
    </wd-button>
    <wd-button type="primary" @click="handleToModelLoad">
      预览模型-动态加载
    </wd-button>
    <wd-button type="primary" @click="handleTo3D">
      AR场景结合放置
    </wd-button>
    <wd-button type="primary" @click="handleTo3DLoad">
      AR场景结合放置-动态加载
    </wd-button>
    <wd-button type="primary" @click="handleTo3DTouch">
      AR场景-放置-手势
    </wd-button>
    <wd-button type="primary" @click="handleTo3DTouchLoad">
      AR场景-放置-手势-动态加载
    </wd-button>
    <wd-button type="primary" @click="handleToCamera">
      camera相机
    </wd-button>
  </view>
</template>
